<template>
  <el-dialog
    v-dialogDrag
    :visible.sync="dialogVisible"
    width="800px"
    center
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :show-close="false"
  >
    <template #title>
      <div
        class="u-relative u-flex u-row-center u-user-select-none custom-header"
        style="background-color: #e2e8ef"
      >
        <span class="custom-header--title">{{ title }}</span>
        <div class="u-absolute-r custom-header--action">
          <i
            class="el-dialog__close u-cursor-pointer el-icon el-icon-close"
            v-throttle="() => $emit('cancel')"
          ></i>
        </div>
      </div>
    </template>

    <div>
      <div class="is-back-padding is-textAlign">
        <el-form :model="formData" size="mini" label-width="150px">
          <el-row :gutter="0">
            <el-col :span="24">
              <el-form-item
                label="产品描述"
                required
                style="position: relative"
              >
                <el-input
                  v-model="formData.jilubianhao"
                  placeholder="产品描述"
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-button slot="append" icon="el-icon-guide" @click="xuanzhe"
                    >JTT617</el-button
                  >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="所属区间" required>
                <el-select
                  v-model="formData.suoshuqujian1"
                  filterable
                  clearable
                  :style="{ width: '25%' }"
                >
                  <el-option
                    v-for="item in listOptions.suoshuqujian1Optiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="formData.suoshuqujian2"
                  clearable
                  :style="{ width: '25%' }"
                >
                </el-input>
                <el-select
                  v-model="formData.suoshuqujian3"
                  filterable
                  clearable
                  :style="{ width: '25%' }"
                >
                  <el-option
                    v-for="item in listOptions.suoshuqujian2Optiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
                <el-input
                  v-model="formData.suoshuqujian4"
                  clearable
                  :style="{ width: '25%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="所属公司"
                required
                class="card-body__eformItem"
              >
                <el-select
                  v-model="formData.CompanyCode"
                  placeholder="请选择所属公司"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.zuzhiOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品代码" required>
                <el-input
                  v-model="formData.jiluhao"
                  placeholder="产品代码"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联合国编号">
                <el-input
                  v-model="formData.lianheguobianhao"
                  placeholder="联合国编号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="货物包装类别(等级)" required>
                <el-select
                  v-model="formData.huopinabozzjie"
                  placeholder="请选择货物包装类别"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.zuzhiOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="危险品等级">
                <el-select
                  v-model="formData.weixinpingdenji"
                  placeholder="请选择危险品等级"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="item in listOptions.weixianpindengjiOptiopns"
                    :key="item.ID"
                    :label="item.Name"
                    :value="item.ID"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="附件">
                <PreviewUploadBtn v-model="formData.teshuyaoqiufujian" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="产品规格">
                <el-input
                  v-model="formData.chanpinguige"
                  placeholder="产品规格"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="CAS编号">
                <el-input
                  v-model="formData.casbianhao"
                  placeholder="CAS编号"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="货物包装规格">
                <el-input
                  v-model="formData.huowubaozhuangedui"
                  placeholder="货物包装规格"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="中石化物料ID">
                <el-input
                  v-model="formData.zhonshihuowuliao"
                  placeholder="中石化物料ID"
                  clearable
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="MSDS">
                <el-input
                  v-model="formData.msieif"
                  placeholder="MSDS"
                  type="textarea"
                  autosize
                  :style="{ width: '100%' }"
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="is-textAlign">
        <!-- 详情模式下 -->
        <div class="is-justifyContent-Evenly">
          <el-button
            type="primary"
            size="mini"
            style="position: relative; top: 10px; width: 120px"
            @click="subim"
          >
            确定
          </el-button>
          <el-button
            type="primary"
            size="mini"
            style="position: relative; top: 10px; width: 120px"
            v-throttle="() => $emit('cancel')"
          >
            返回
          </el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import PreviewUploadBtn from "@/components/Universal/PreviewUploadBtn/index.vue";
import ValidateMixin from "@/mixins/ValidateMixin.js";
import JTT617_from from "./JTT617_from.vue";

// 表单校验
const REQUIRED_PORP_LIST = [
  {
    prop: "CompanyCode",
    label: "所属公司",
  },
];

export default {
  name: "YiBanForm",
  mixins: [ValidateMixin],
  components: {
    PreviewUploadBtn,
  },
  props: {
    mode: {
      type: String,
    },
  },

  data() {
    return {
      title: "",
      dialogVisible: true,
      formData: {
        CompanyCode: "",
        jilubianhao: "",
        jiluhao: "",
        lianheguobianhao: "",
        huopinabozzjie: "",
        chanpinguige: "",
        casbianhao: "",
        huowubaozhuangedui: "",
        zhonshihuowuliao: "",
        msieif: "",
        suoshuqujian1: "",
        suoshuqujian2: "",
        suoshuqujian3: "",
        suoshuqujian4: "",
        teshuyaoqiufujian: [],
        weixinpingdenji: "",
      },
      listOptions: {
        zuzhiOptiopns: [
          {
            ID: 1,
            Name: "广州公司",
          },
        ],
        suoshuqujian1Optiopns: [
          {
            ID: 1,
            Name: "大于",
          },
          {
            ID: 2,
            Name: "大于等于",
          },
        ],
        suoshuqujian2Optiopns: [
          {
            ID: 1,
            Name: "小于",
          },
          {
            ID: 2,
            Name: "小于等于",
          },
        ],
        weixianpindengjiOptiopns: [
          {
            ID: 1,
            Name: "一类",
          },
          {
            ID: 1.1,
            Name: "一类1.1",
          },
          {
            ID: 1.2,
            Name: "一类1.2",
          },
          {
            ID: 1.3,
            Name: "一类1.3",
          },
          {
            ID: 1.4,
            Name: "一类1.4",
          },
          {
            ID: 1.5,
            Name: "一类1.5",
          },
          {
            ID: 2,
            Name: "二类",
          },
          {
            ID: 2.1,
            Name: "二类2.1",
          },
          {
            ID: 2.2,
            Name: "二类2.2",
          },
          {
            ID: 2.3,
            Name: "二类2.3",
          },
          {
            ID: 3,
            Name: "三类",
          },
          {
            ID: 4,
            Name: "四类",
          },
          {
            ID: 4.1,
            Name: "四类4.1",
          },
          {
            ID: 4.2,
            Name: "四类4.2",
          },
          {
            ID: 4.3,
            Name: "四类4.3",
          },
          {
            ID: 5,
            Name: "五类",
          },
          {
            ID: 5.1,
            Name: "五类5.1",
          },
          {
            ID: 5.2,
            Name: "五类5.2",
          },
          {
            ID: 6,
            Name: "六类",
          },
          {
            ID: 6.1,
            Name: "六类6.1",
          },
          {
            ID: 6.2,
            Name: "六类6.2",
          },
          {
            ID: 7,
            Name: "七类",
          },
          {
            ID: 7.1,
            Name: "七类7.1",
          },
          {
            ID: 7.2,
            Name: "七类7.2",
          },
          {
            ID: 7.3,
            Name: "七类7.3",
          },
          {
            ID: 8,
            Name: "八类",
          },
          {
            ID: 9,
            Name: "九类",
          },
        ],
      },
    };
  },
  methods: {
    //校验必填
    subim() {
      if (!this.$validateForm(this.formData, REQUIRED_PORP_LIST)) return;
      this.$notify.success({
        title: "消息",
        message: "保存成功",
        position: "bottom-right",
      });
      this.$emit("done");
    },

    //JTT617
    xuanzhe() {
      let data = {
        yiyou: this.formData.jilubianhao,
      };
      this.$openDialog(JTT617_from)(data, this)
        .then((res) => {
          this.formData.jilubianhao = res.chanpingmiaoshu;
        })
        .catch(() => {
          console.log("用户返回了");
        });
    },
  },

  created() {
    if (this.mode === "addchanpindaima_from") this.title = "新增产品信息";
    if (this.mode === "editchanpindaima_from") this.title = "编辑产品信息";
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
  background-color: rgb(226, 232, 239);
}
// 弹窗表头
::v-deep .custom-header {
  background-color: rgb(226, 232, 239);
  & .custom-header--action {
    font-size: 20px;
  }
}
.is-back-padding {
  background-color: rgb(226, 232, 239);
  padding: 20px 30px 0 0px;
}
.is-justifyContent-Evenly {
  display: flex;
  justify-content: space-evenly;
}
.is-buttonBackground {
  position: relative;
  width: 80px;
  background: rgb(204, 204, 204);
  color: #000;
  border-color: #000;
}

// 隐藏
::v-deep.disNone {
  display: none;
}
</style>
